<template>
	<view>
		<view class="u-page">
			<!--banner-->
			<u-swiper :height="300" :list="filter.gallery(swiperList)" @click="i => navto(swiperList[i])" />
			<u-grid class="bgw" col="5">
				<u-grid-item v-for="(item, i) in naviList" :key="i" @click="navto(item.url)">
					<view class="fjc">
						<image :lazy-load="true" :src="filter.image(item.icon)" class="h8 w8" mode="scaleToFill" />
					</view>
					<text class="c5 fs24 fjc">{{item.title}}</text>
				</u-grid-item>
			</u-grid>
			<view class="p4 ps">
				<u-search placeholder="请输入商品名" v-model:modelValue="querys.name" confirm-type="search" @search="reload" :show-action="false"></u-search>
			</view>
			<view class="pb4 px4 bgw">
				<view class="fjc py5" @click="navto('stob/item/index')">
					<text class="fs32 twb">新品</text>
					<text class="icon icon-right c6 fs24 ml2" />
				</view>
				<u-grid :col="2">
					<u-grid-item v-for="(item, i) in itemList" :key="i" class="tui-new-item h20 br2 mb3 pr" @click="navto('stob/item/view', { id: item.item_id || item._id })">
						<image :lazy-load="true" :src="'/static/image/'+(item.type==1?'new':'discount')+'.png'" class="tui-new-label"/>
						<view class="fjb px4">
							<view class="f1 oh fdc">
								<text class="tl2 fs24 lh32">{{item.name}}</text>
								<view class="pt4 fjs">
									<text class="fc-green fs24 fw6"><text class="fs20">￥</text>{{filter.number(item.price/100)}}</text>
									<text class="fc-market fs24 tdt"><text class="fs20">￥</text>{{filter.number(item.market_price/100)}}</text>
								</view>
							</view>
							<view class="h16">
								<image :lazy-load="true" :src="filter.image(item.thumb)" class="w16 h16 br2" />
							</view>
						</view>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="px2">
				<view class="fjc py5"><text class="fs32 twb">热门</text></view>
				<view xs="2" md="2">
					<view v-for="(item, i) in itemList" :key="i" class="bgw px2 br2" @click="navto('stob/item/view', { id: item.item_id || item._id })">
						<image :lazy-load="true" :src="filter.image(item.thumb)" class="wt h34" />
						<view class="p4">
							<text class="fc-title tl2 fs26">{{item.name}}</text>
							<view class="fae pt4">
								<text class="fc-green fs24"><text class="fs20">￥</text></text>
								<text class="fc-green fs34 fw5 lh34">{{filter.number(item.price/100)}}</text>
								<text class="c10 fs24 tdt pl2"><text class="fs20">￥</text>{{filter.number(item.market_price/100)}}</text>
							</view>
							<text class="c6 pt2 fs24">销售量{{item.vol}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-tabbar v-model:modelValue="index" :list="list" @change="change" />
	</view>
</template>
<script lang="ts">
import util from '@/utils/util'
import {page} from '@/mixins'
export default {
	mixins: [page],
	components: {},
	data () {
		return {
			keyList: ["自热火锅", "华为手机", "有机酸奶", "苹果手机"],
			hotList: ["休闲零食", "自热火锅", "小冰箱迷你"],
			swiperList: [],
			naviList: [],
			newList: [],
			itemList: [],
			querys: {name: ''},
			index: '0',
			loadPath: 'stob/index'
		}
	},
	onLoad() {
		uni.onTabBarMidButtonTap(()=>{
		})
	},
	methods: {
		change (i) {
			const paths = ['stob', 'stob/cate/index', 'stob/flow/cart', 'store/index']
			util.navto(paths[i])
		}
	}
}
</script>
